<template>
  <div class="trace-container">
    <div v-if="qrInfo" class="trace-info">
      <h2>产品追溯信息</h2>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="批次ID">{{
          qrInfo.qrPatchID
        }}</el-descriptions-item>
        <el-descriptions-item label="生成时间">{{
          parseTime(qrInfo.qrProductionTime)
        }}</el-descriptions-item>
        <el-descriptions-item label="唯一编码">{{
          qrInfo.qrUniqueCode
        }}</el-descriptions-item>
        <el-descriptions-item label="零售商信息">{{
          qrInfo.qrRetailerInfo
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-else class="trace-error">
      <h2>未找到相关信息</h2>
      <p>该二维码可能已失效或不存在</p>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Trace",
  data() {
    return {
      qrInfo: null,
    };
  },
  created() {
    const code = this.$route.params.code;
    if (code) {
      this.getQrInfo(code);
    }
  },
  methods: {
    getQrInfo(code) {
      request({
        url: `/seedlingSys/qr/trace/${code}`,
        method: "get",
      })
        .then((response) => {
          this.qrInfo = response.data;
        })
        .catch(() => {
          this.qrInfo = null;
        });
    },
  },
};
</script>

<style scoped>
.trace-container {
  padding: 20px;
}
.trace-info {
  max-width: 800px;
  margin: 0 auto;
}
.trace-error {
  text-align: center;
  color: #f56c6c;
}
</style>
